<template>
  <!-- 容器 -->
  <!-- 使用ref生成一个dom元素 -->
  <div
    class="swiper-container"
    ref="swiper"
    @mouseenter="swiper.autoplay.stop()"
    @mouseleave="swiper.autoplay.start()"
  >
    <!-- 轮播图区域 -->
    <div class="swiper-wrapper">
      <!-- 
        1、所有的资源要引入才会被打包，才会被解析
        2、异步资源webpack是不会打包的
        这样就会导致轮播图不会被打包
        解决方法：放在public下面，public下面的所有文件都会被wepack都会被打包，不管是否有被使用
        并且它是根目录
       -->
      <div class="swiper-slide" v-for="(img,index) in imageList" :key="img.id">
         <!-- 解决v-lazy懒加载问题：无缝轮播第一张和最后一张没法整 -->
        <img v-if="index===0 || index===imageList.length-1"
        :src="img.imgUrl" 
        :alt="img.id" />
        <img v-else v-lazy="img.imgUrl" :alt="img.id" />
      </div>
    </div>
    <!-- 左右箭头 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 小圆点样式 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  // 使用swiper前要先下载npm i swiper@5，指定版本，6是给vue3使用的
  // 引入
  import Swiper from "swiper";
  // 引入css
  import "swiper/css/swiper.min.css";

  export default {
    name: "Carousel",
    props: {
      imageList: {
        type: Array,
        require: true, 
      },
    },
    watch: {
      // imageList是新的值，当这个函数触发的时候，就已经有新的值了
      imageList: {
        handler(imageList){
          // 这里是判断第一个轮播图触发两次第一次是没有意义的，当它有值的时候才触发
          if(!imageList.length) return;
        this.$nextTick(() => {
          //当函数在￥nextTick里面触发了，说明我们的dom元素更新好了
          this.swiper = new Swiper(this.$refs.swiper, {
            // 左右箭头
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            // 小圆点
            pagination: {
              el: ".swiper-pagination",
            },
            // 无缝轮播属性
            loop: true,
            // 自动轮播属性，默认时间3秒，如果想设置时间，需要设置称为一个对象
            autoplay: true,
          });
        });
      },
      immediate:true,
      },
      
    },
    //   这里为什么定义在生命周期函数中，因为要等dom元素挂载完毕才能去调用这个方法，才有效果
    mounted() {
      /* 
          新的问题，图片的加载是异步的，所有轮播图是异步渲染好的，
          mounted触发的时候是出书啊渲染完成，此时，请求还没完成，
          所以轮播图还没生成dom结构
          new Swiper就没办法生成轮播图
          总结原因： new Swiper时轮播图还没有，没法渲染轮播图
          解决：1、等异步数据imageList回来
                使用watch监视属性，一旦数据发生变化就会触发
                当imageList由空数组变成有值的时候就会触发，此时刚好就有数据了
          问题2、当我们只是在watch中监听imageList，new Swiper还是不行的，
                原因，更新是异步的，数据更新了，并不代表页面也更新了
            解决方法：$nextTick保证等页面更新后触发，并且只触发一次
        */
      // 这里既可以传一个元素.swiper-container，也可以传dom(this.$refs.Swiper)
      //   this.swiper上有三个对象，所以会出错，容器类名重复了
      // console.log(this.swiper);
      //  this.swiper = new Swiper(this.$refs.swiper, {
      //     // 左右箭头
      //     navigation: {
      //       nextEl: ".swiper-button-next",
      //       prevEl: ".swiper-button-prev",
      //     },
      //     // 小圆点
      //     pagination: {
      //       el: ".swiper-pagination",
      //     },
      //     // 无缝轮播属性
      //     loop: true,
      //     // 自动轮播属性，默认时间3秒，如果想设置时间，需要设置称为一个对象
      //     autoplay: true,
      //   });
    },
  };
</script>

<style></style>
